<script setup lang="ts">
// //选项式 API 多方法总和
// export default {
//   data() {
//     return {
//       sum: 0,
//     };
//   },
//   methods: {
//     addition() {
//       this.sum = 0;
//       for (let i = 1; i <= 100; i++) {
//         this.sum += i;
//       }
//     },
//   },
// };

// //组合式api
// import { ref } from "vue";
// const sum = ref(0);
// function addition() {
//   sum.value = 0;
//   for (let i = 1; i <= 100; i++) {
//     sum.value += i;
//   }
// }

//组件挂载
import { ref, onMounted } from "vue";
const sum = ref(0);
// 在组件挂载后执行累加逻辑
onMounted(() => {
  for (let i = 1; i <= 100; i++) {
    sum.value += i;
  }
});
</script>
<template>
  <!-- <input type="submit" @click="addition" value="点击计算 1~100 的和值" />
  <p>1 到 100 的累加值是: {{ sum }}</p> -->
  <div>1 到 100 的累加值是：{{ sum }}</div>
</template>
<style>
input,
p {
  width: 200px;
  text-align: center;
  margin: 20px;
}
</style>
上面
